<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      function getXHR() {
        var xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObjext('Microsoft.XMLHttp');
        }
        return xhr;
      }
      //第一步：创建XMLHttpReques对象
      var ajax = getXHR();
      console.log('open调用之前' + ajax.readyState);

      //第二步：创建请求
      // ajax.open('get', 'http://localhost:8000?username=小红&password=1111', true);
      // ajax.open('post', 'http://localhost:8000', true);

      ajax.open('get', 'https://cnodejs.org/api/v1/topics', true);
      // ajax.open("get", "https://cnodejs.org/api/v1/topics?page=2&limit=10", true);// GET请求在URL上体现请求数据
      // ajax.open('post', 'https://cnodejs.org/api/v1/topics', true);//POST请求，在send方法中传数据
      console.log('open调用之后send调用之前' + ajax.readyState);

      //第三步：接受响应执行回调函数——当状态改变时自动触发该函数
      ajax.onreadystatechange = function () {
        console.log("ajax:",ajax);
        if (ajax.readyState == 2) console.log('头部和状态获取成功' + ajax.readyState + ' : ' + ajax.status);
        if (ajax.readyState == 3) console.log('数据正在获取中' + ajax.readyState + ' : ' + ajax.status);
        if (ajax.readyState == 4 && ajax.status == 200) {
          //接受数据成功条件
          console.log('数据获取完成' + ajax.readyState + ' : ' + ajax.status);
          var txt = ajax.responseText;
          console.log(txt);
          console.log(typeof txt);
          // var data = JSON.parse(txt); //json数据解析为js对象
          //console.log(typeof data);
          //console.log(data);

          //其他DOM操作
        }
      };

      //第四步：发送请求
      ajax.send(); //
      // ajax.send('username=小明&password=1111'); //send发送数据 对应是POST请求 GET请求在URL上体现数据
      

      //思考要是用GET方法请求，下述传参是否起作用
      // ajax.send('page=1&limit=1'); //send发送数据 对应是POST请求 GET请求在URL上体现数据
    </script>
  </body>
</html>
